<script>
import {cancelOrderApi, getOrderDetailApi} from "@/pagesOrders/api/orders"
import cancelOrderConfirm from "@/pagesOrders/mixin/cancelOrderConfirm"
import SafeBox from "@/components/SafeBox.vue"

export default {
  name: "OrderDetail",
  components: {SafeBox},
  mixins: [cancelOrderConfirm],
  data() {
    return {
      orderId: '',
      order: {},
      state_text: ''
    }
  },
  onLoad(options) {
    this.orderId = options.orderId
    this.getOrderDetail()
  },
  computed: {
    user_info() {
      if (!Object.keys(this.order).length) return {}

      return this.order.address
    },

    // 拼接省市区详细地址组成地址门牌号
    address_info() {
      if (!Object.keys(this.order).length) return ''

      const address = this.order.address

      return address.region.province + address.region.city + address.region.region + ' ' + address.detail
    },
  },
  methods: {
    // 获取订单详情
    async getOrderDetail() {
      const res = await getOrderDetailApi(this.orderId)
      this.order = res.data.order
      this.state_text = res.data.order.state_text
    },

    // 取消订单
    async onCancelOrder() {
      const confirmed = await this.cancelOrderConfirm()

      if (confirmed) { // 如果确认
        await cancelOrderApi(this.orderId)

        await this.getOrderDetail() // 重新获取订单详情
      }
    },

    // 复制订单编号
    async onCopy(order_no) {
      uni.setClipboardData({
        data: order_no
      })
    }
  }
}
</script>

<template>
  <div class="orderDetail">
    <van-nav-bar title="订单详情" left-arrow @click-left="uni.navigateBack"/>

    <div class="header">
      <image v-if="state_text === '待发货'" src="@/static/wait_deliver.png" alt=""/>
      <image v-else-if="state_text === '待取消'" src="@/static/close.png" alt=""/>
      {{ order.state_text }}
    </div>

    <div class="order_list" style="padding-bottom: 50px">
      <!-- 用户信息部分 -->
      <div class="order_item user">
        <text class="name">{{ user_info.name }}</text>
        <text class="mobile">{{ user_info.phone }}</text>
        <div class="address">{{ address_info }}</div>
      </div>

      <!-- 商品列表部分 -->
      <div class="order_item goods_list">
        <div v-for="good in order.goods" :key="good.goods_id" class="goods_item">
          <image :src="good.goods_image" alt=""/>
          <text class="text text-ellipsis-2">{{ good.goods_name }}</text>
          <div class="count_info">
            <text class="price">¥{{ good.goods_price }}</text>
            <text class="count">×{{ good.total_num }}</text>
          </div>
        </div>
      </div>

      <!-- 订单信息部分 -->
      <div class="order_item order_info">
        <div class="info_row left">
          <text class="label">订单编号</text>
          <div class="value">
            <text>{{ order.order_no }}</text>
            <button @click="onCopy(order.order_no)" class="copy_btn">复制</button>
          </div>
        </div>
        <div class="info_row left">
          <text class="label">下单时间</text>
          <text class="value">{{ order.create_time }}</text>
        </div>
        <div class="info_row left">
          <text class="label">买家留言</text>
          <text class="value">{{ order.buyer_remark || '--' }}</text>
        </div>
      </div>

      <!-- 价格信息部分 -->
      <div class="order_item price_info">
        <div class="info_row between">
          <text class="label">订单金额</text>
          <text class="price">¥{{ order.total_price }}</text>
        </div>
        <div class="info_row between">
          <text class="label">运费</text>
          <text class="price">+¥{{ order.express_price }}</text>
        </div>
        <div class="info_row right">
          <text>实付款</text>
          <text class="price">¥{{ order.pay_price }}</text>
        </div>
      </div>

      <SafeBox></SafeBox>
    </div>

    <view class="_footer">
      <!-- 待发货状态 -->
      <template v-if="state_text === '待发货'">
        <button @click="onCancelOrder" class="cancel-btn">申请取消</button>
      </template>

      <!-- 取消申请中状态 -->
      <template v-else-if="state_text === '待取消'">
        <text class="cancel-status">取消申请中</text>
      </template>
    </view>
  </div>
</template>

<style lang="less">
.orderDetail {
  background-color: #f4f4f4;
  color: #333333;

  .van-nav-bar {
    position: sticky;
    top: 0;
    width: 100%;
    background-color: #e8c269;

    ::v-deep .van-icon {
      color: #fff !important;
    }

    ::v-deep .van-nav-bar__title {
      color: #fff;
    }

    &::after {
      border: 0;
    }
  }

  .header {
    display: flex;
    background-color: #e8c269;
    align-items: center;
    height: 143px;
    padding: 0 15px;
    color: #fff;
    font-size: 20px;

    image {
      width: 65px;
      height: 65px;
      margin-right: 10px;
    }
  }

  .order_list {
    padding: 0 10px;
    margin-top: -25px;

    .order_item {
      background-color: #fff;
      font-size: 14px;
      border-radius: 10px;
      padding: 10px;
      line-height: 23px;
      margin-bottom: 10px;
    }

    .user {
      .name {
        margin-right: 5px;
      }

      .address {
        color: #a4a4a4;
        font-size: 12px;
      }
    }

    .goods_list {

      .goods_item {
        display: flex;
        justify-content: space-between;
        margin-bottom: 20px;

        image {
          width: 92px;
          height: 92px;
        }

        .text {
          font-size: 14px;
          line-height: 20px;
          height: 50px;
          padding-left: 8px;
          padding-top: 8px;
        }

        .count_info {
          color: #9999a6;
          display: flex;
          flex-direction: column;
          align-items: flex-end;
          padding-top: 8px;
        }
      }

      .goods_item:last-child {
        margin-bottom: 0;
      }
    }

    .order_info, .price_info {
      .info_row {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
        font-size: 14px;
        color: #333;

        &:last-child {
          margin-bottom: 0;
        }

        // 左对齐样式
        &.left {
          justify-content: flex-start;

          .label {
            width: 70px; // 固定标签宽度
            color: #999;
          }

          .value {
            flex: 1;
          }
        }

        // 两端对齐样式
        &.between {
          justify-content: space-between;

          .label {
            width: 70px; // 固定标签宽度
            color: #999;
          }
        }

        // 右对齐样式
        &.right {
          justify-content: flex-end;
          margin-top: 10px;
          padding-top: 10px;
          border-top: 1px solid #eee;

          text {
            margin-left: 10px;
          }

          .price {
            color: #ff4444;
            font-size: 16px;
            font-weight: 500;
          }
        }

        .value {
          display: flex;
          align-items: center;

          .copy_btn {
            margin-left: 10px;
            padding: 0 10px;
            border: 1px solid #ddd;
            border-radius: 12px;
            font-size: 12px;
            background: #fff;
            color: #666;
          }
        }
      }
    }
  }

  ._footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    display: flex;
    height: 50px;
    justify-content: flex-end;
    align-items: center;
    background-color: #fff;
    box-shadow: 0 -2px 20px 0 hsla(0, 0%, 59.2%, .24);
    padding: 0 15px; // 添加左右内边距

    .cancel-btn {
      min-width: 83px;
      height: 28px;
      line-height: 26px;
      border-radius: 14px;
      padding: 0 12px;
      font-size: 14px;
      color: #383838;
      text-align: center;
      border: 1px solid #a8a8a8;
      background-color: #fff;
      margin: 0;
    }

    .cancel-status {
      color: #999;
      font-size: 14px;
    }
  }

}
</style>
